<template>
	<div class="exam-mine" :style="{ fontSize: fontSize + 'px' }">
		<div class="exam-mine-nav">
			<van-nav-bar @click-left="clickLeft">
				<template #left>
					<img class="left-img" src="../../assets/img/back.png" />
				</template>
				<template #title>
					<div class="pc-b2">真题作文</div>
					<div class="pc-b1 exam-pc-input">
						<van-field v-model="value1" left-icon="" right-icon="search" placeholder="请输入你需要搜索的书名"
							@click-right-icon="onSearch" />
					</div>
				</template>
				<template #right>
					<div class="pc-b1 exam-pc-right">
						<div class="d-flex">
							<div class="rt-txt">目录</div>
							<div class="rt-txt" @click="showPicker = true">设置</div>
							<div class="rt-txt">登录</div>
						</div>
					</div>
					<div class="ipad-b1" @click="showPicker = true">
						<div class="d-flex">
							<img class="settings-img" src="../../assets/img/pc/settings.png" />
						</div>
					</div>
					<div class="pc-b2">
						<div class="ipad-b2" @click="showPicker2 = true">
							<div class="d-flex">
								<img class="settings-img" src="../../assets/img/pc/settings.png" />
							</div>
						</div>
					</div>
				</template>
			</van-nav-bar>
		</div>
		<div class="exam-paper-box" :class="model?'colum':''">
			<div class="article-box">
				<div class="exam-title">
					{{detail.title}}
				</div>
				<div class="exam-img-box">
					<img class="book-img1" src="../../assets/img/book/img1.png" />
					<img src="../../assets/img/book/img1.png" />
				</div>
				<div class="d-flex d-row-right d-col-center">
					<span>{{detail.year}}年</span>
					<van-icon name="arrow" />
				</div>
				<div class="intro-box">
					<span>简介</span>
					{{detail.introduction}}
				</div>
				<div class="intro-box">
					<span class="mark">评分</span>
					<div v-html="detail.score"></div>
				</div>
				<div class="article-content">
					<div class="tit">文章内容</div>
					<div>
						{{detail.content}}
					</div>
					<div class="indent2">
						{{detail.contentZh}}
					</div>
				</div>
			</div>
			<div class="article-box article-content original-text">
				<div class="tit">原稿</div>
				<img class="original-img" src="../../assets/img/book/img1.png" />
				<img class="original-img" src="../../assets/img/book/img1.png" />
			</div>
			<div class="footer-tool footer-tool-ipad pc-b2">
				<div class="d-flex mb24 d-row-center">
					<div class="d-flex btn-box d-col-center d-row-center tool-btn-box background-b" v-if="readingMode"
						@click="showPicker3 = true">
						<img :src="linImage" />
						<div>沉浸模式</div>
					</div>
					<div v-else class="d-flex btn-box d-col-center d-row-center tool-btn-box color-black"
						@click="openUrl('/reading')">
						<img :src="linImage2" />
						<div>沉浸模式</div>
					</div>
					<img class="previous-next ipad-b1" src="../../assets/img/mobile/left.png" />
					<div class="d-flex btn-box d-col-center d-row-center pause-btn tool-btn-box">
						<!-- <img :src="pauseImage" /> -->
						<img :src="playImage" />
					</div>
					<img class="previous-next ipad-b1" src="../../assets/img/mobile/right.png" />

					<div class="d-flex btn-box d-col-center d-row-center font-btn tool-btn-box">
						<div>字号</div>
						<van-icon name="minus" @click="fontSize--" class="mr15 ml15" />
						<van-icon name="plus" @click="fontSize++" />
					</div>
				</div>
				<!-- 移动端按钮 -->
				<div class="ipad-b2">
					<div class="d-flex d-row-center">
						<div class="d-flex btn-box d-col-center d-row-center mu-btn tool-btn-box "
							@click="showPicker3 = true">
							<div>目录</div>
						</div>
						<div class="d-flex btn-box d-col-center d-row-center previous-btn tool-btn-box color-b">
							<div>上一篇</div>
						</div>
						<div class="d-flex btn-box d-col-center d-row-center tool-btn-box next-btn background-b">
							<div>下一篇</div>
						</div>
					</div>
				</div>
			</div>
			<!-- pc按钮 -->
			<div class="pc-next-box">
				<div class="d-flex d-row-center">

					<div class="d-flex btn-box d-col-center d-row-center mu-btn tool-btn-box col-block"
						@click="showPicker3 = true">
						<div>目录</div>
					</div>
					<div class="d-flex btn-box d-col-center d-row-center previous-btn tool-btn-box color-b"
						@click="model=!model">
						<div>切换</div>
					</div>
					<div class="d-flex btn-box d-col-center d-row-center previous-btn tool-btn-box color-b">
						<div>上一篇</div>
					</div>
					<div class="d-flex btn-box d-col-center d-row-center tool-btn-box background-b">
						<div>下一篇</div>
					</div>
				</div>
			</div>
			<!-- 目录 -->
			<van-popup v-model:show="showPicker3" round position="bottom">
				<van-picker ref="readPicker" v-model="selectedValues" :columns="columns" @confirm="onConfirm">
					<template #toolbar>
						<div class="select-title-box">
							<div class="cancel-box">
								<van-icon @click="showPicker3 = false" name="cross" size="26" color="#000000" />
							</div>
							<div class="d-flex">
								<div class="select-tit">選擇日期</div>
								<div class="select-tit">選擇分类</div>
							</div>
						</div>
					</template>
					<template #columns-bottom>
						<div class="d-flex d-row-center exam-columns-box">
							<div @click="showPicker3 = false"
								class="d-flex btn-box d-col-center d-row-center previous-btn tool-btn-box color-b">
								<div>返回</div>
							</div>
							<div @click="readConfirm"
								class="d-flex btn-box d-col-center d-row-center tool-btn-box next-btn background-b">
								<div>确定</div>
							</div>
						</div>
					</template>
				</van-picker>
			</van-popup>
		</div>
		<van-popup v-model:show="showPicker" round position="right">
			<settings></settings>
		</van-popup>
		<van-popup v-model:show="showPicker2" :style="{ height: '60%' }" round position="bottom">
			<settings></settings>
		</van-popup>
	</div>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		useRouter
	} from "vue-router";
	import Settings from "@/components/Settings.vue";
	import linImage from "@/assets/img/mobile/lin-white.png";
	import linImage2 from "@/assets/img/mobile/lin-black.png";
	import pauseImage from "@/assets/img/mobile/pause.png";
	import playImage from "@/assets/img/mobile/play.png";

	// pc端切换显示模式
	const model = ref(true)

	const showPicker = ref(false);
	const showPicker2 = ref(false);
	const fontSize = ref(16);
	const router = useRouter();
	const readPicker = ref(); // 选择
	const columns = ref([
		[{
				text: "2021年",
				value: "2021"
			},
			{
				text: "2022年",
				value: "2022"
			},
			{
				text: "2023年",
				value: "2023"
			},
			{
				text: "2024年",
				value: "2024"
			},
		],
		// 第二列
		[{
				text: "分类1",
				value: "1"
			},
			{
				text: "分类2",
				value: "2"
			},
			{
				text: "分类3",
				value: "3"
			},
			{
				text: "分类3",
				value: "3"
			},
			{
				text: "分类3",
				value: "3"
			},
			{
				text: "分类3",
				value: "3"
			},
		],
	]);
	const selectedValues = ref(["2023"]);
	const showPicker3 = ref(false);
	const readingMode = ref(false);
	const onConfirm = (value) => {
		showPicker3.value = false;
	};
	const openUrl = (url) => {
		// router.back();
		router.push(url);
	};
	const clickLeft = () => {
		router.back();
	};
	const readConfirm = () => {
		// router.back();
		console.log(readPicker.value.getSelectedOptions());
		showPicker3.value = false;
		readingMode.value = !readingMode.value;
	};

	const detail = ref({
		title: "依提示寫一篇英文作文，文長至少120個單詞（words）",
		year: "2023",
		introduction: "隨著社群媒體的普及，表情符號（emoji）的使用也極為普遍。請參考下列表情符號，寫一篇英文作文，文分兩段。第一段說明人們何以喜歡使用表情符號，並從下列的表情符號中舉一至二例，說明表情符號在溝通上有何功能。第二段則以個人或親友的經驗為例，討論表情符號在訊息表達或解讀上可能造成的誤會或困擾，並提出可以化解的方法。",
		score: `一、第一段說明表情符號是線上聊天不可或缺之資產，並舉例4及例3說明，因為表情符號比起文字可愛、生動及方便，因此能取代文字訊息。第二段敘述自己朋友考試被當，卻送了笑臉造成誤會的經驗，最後提出表情符號應視為補充功能，清楚的文字訊息更為重要。
					<br />
					二、內容豐富，描述生動，用字貼切。`,
		content: `Ever since the invention of smartphones, people have been enjoying a
						convenient way of communication — texting. To express the
						complicated emotions of humans through plain and short sentences,
						emojis were introduced to the world and loved by many shortly.
						Emojis allow people to convey their feelings behind texts using
						small pictures of facial expressions that are extremely accessible
						and easy to understand. For example, when one of your friends told
						you a humorous joke through texting, replying them with “hahaha” may
						not be enough to express the quality of their joke. This is when you
						can send an emoji of a face laughing with hard with tears dangling
						on its cheeks. Also, if someone irritated you by saying something
						offending over text, you can display you anger and disgust through
						the emoji of a face frowning with rage.`,
		contentZh: `俗话说：“一幅画胜过千言万语。”现代人每天都在通过在文本中加入表情符号来实现这一说法。表情符号是一个小图片，比如一张笑脸，大小与文本页边距一样，经常在网上发送信息时使用。表情符号的使用似乎突然出现，近年来蓬勃发展，已成为在线聊天不可或缺的资产。这种趋势背后的原因其实很明显。首先，表情符号看起来很可爱。发送一张心形眼睛的微型脸，就像图4中一样，绝对比输入“luv
						u”感觉更亲密。其次，表情符号让人们生动地表达了发送者的想法。图片3中的笑脸可能更能代表我的感受，而不是重复键入“LMAO”来回应笑话。最后但同样重要的是，用表情符号回复非常方便。与打字相比，它花费的时间要少得多，而且你可以发送各种各样的小图片，几乎可以表达每一种情绪。难怪表情符号正在彻底改变我们的信息。`,
	})
</script>

<style lang="scss" scoped>
	.exam-mine {
		background-image: url("../../assets/img/mobile/back-flowers.png");
		background-size: 430px 318px;
		background-position: center 0;
		background-repeat: no-repeat;
		background-color: #fff;
		position: relative;
		.colum{
			flex-direction: column;
			align-items: center;
		}

		.pc-next-box {
			position: absolute;
			bottom: 20px;
			left: calc(50vw - 244px);
			display: none;
		}

		@media screen and (min-width: 800px) {
			background-size: 600px 418px;
			background-position: center -30px;

			.pc-next-box {
				display: block;
			}
		}

		.select-title-box {
			width: 100%;
			font-size: 16px;
			padding-top: 16px;
			position: relative;

			.cancel-box {
				position: absolute;
				top: 14px;
				left: 15px;
			}

			.select-tit {
				flex: 1;
				text-align: center;
			}
		}

		.exam-columns-box {
			background: #fff;
			padding: 30px 0;
		}

		.exam-mine-nav {

			/* padding: 0 26px; */
			.exam-pc-input {
				margin-left: -600px;
			}

			.exam-pc-right {
				.rt-txt {
					margin-left: 65px;
				}
			}
		}

		.footer-tool {
			background: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 10px 24px;

			/*平板竖屏*/
			@media screen and (min-width: 800px) {
				display: flex;

				.mb24 {
					margin: 40px auto 0;
				}
			}
		}

		.exam-paper-box {
			margin-top: 54px;
			background-color: #fff;
			box-shadow: 0px 2px 20px 0px rgba(189, 189, 189, 0.5);
			border-radius: 10px;
			padding: 20px 26px;
			margin-bottom: 8px;
			display: block;

			.article-box {
				width: 100%;

				@media screen and (min-width: 1400px) {
					width: calc(50% - 10px);
				}
			}

			@media screen and (min-width: 1400px) {
				display: flex;
			}

			.article-content {
				margin-top: 20px;
				// font-size: 14px;
				color: #646668;
				line-height: 20px;
				text-align: justify;
				text-justify: inter-word;
				background: linear-gradient(224deg, #f5fcff 0%, #eef7ff 100%);
				border-radius: 4px 4px 4px 4px;
				padding: 12px 16px;

				&.original-text {
					background: #f7f9fc;
					margin-bottom: 100px;
				}

				.original-img {
					width: 100%;
					height: auto;
					margin-bottom: 10px;
				}

				.tit {
					font-size: 14px;
					font-weight: bold;
					color: #252626;
				}

				div {
					margin-bottom: 8px;
				}
			}

			.intro-box {
				margin-top: 20px;
				color: #9b9da0;

				span {
					font-size: 14px;
					padding: 0 8px;
					font-weight: bold;
					color: #fff;
					display: inline-block;
					background: linear-gradient(142deg, #65e98e 0%, #07aa33 100%);
					border-radius: 4px 4px 4px 4px;
				}

				.mark {
					background: linear-gradient(142deg, #65d8e9 0%, #3d7aff 100%);
				}
			}

			.exam-title {
				font-size: 16px;
				font-weight: bold;
				color: #333333;
				padding-bottom: 10px;
			}

			.exam-img-box {
				margin-bottom: 10px;

				img {
					width: calc(50% - 5px);
				}

				.book-img1 {
					margin-right: 10px;
				}
			}
		}

		.previous-next {
			width: 40px;
			height: 40px;
			margin: 0 40px;
		}

		.tool-btn-box {
			width: 116px;
			color: #fff;
			cursor: pointer;
			img {
				width: 20px;
				margin-right: 8px;
			}

			&.color-black {
				color: #252626;
			}

			&.pause-btn {
				width: 58px;
				margin: 0 8px;

				img {
					width: 22px;
					margin-right: 0;
				}
			}

			&.font-btn {
				width: 138px;
				color: #252626;
			}

			&.previous-btn {
				width: 108px;
				border: 1px solid #1e7bfe;
				color: #1e7bfe;
				margin-right: 16px;
			}

			&.mu-btn {
				width: 108px;
				border: 1px solid #9B9DA0;
				color: #000;
				margin-right: 16px;
			}

			&.next-btn {
				width: 212px;
			}
		}
	}
</style>